<template>
   <div>
       <div class="frame flex">
           <textarea   v-model="content" @input='getContentLength($event.target)' maxlength="150"  
                           placeholder="有趣的内容才能吸引人噢！"/>  
            <p class="flex">{{150-contentLength}}</p>         
      </div>
      <div id="Fun" class="flex">
            <img src="@/assets/function/Emoji.png" @click="EmojiState=!EmojiState">
            <img src="@/assets/function/Photo.png" @click="sendPhoto">
            <img src="@/assets/function/Send.png" class="send" @click="publish" >
      </div>
      <Emoji id="Emoji" :sendEmo="sendEmo"  v-if="EmojiState"/>
   </div>
</template>
<script>

import Emoji from '@/components/Package/Emoji/Emoji.vue'
import common from "@/common/global"
import { mapActions, mapState,mapMutations } from 'vuex'
  export default 
  {
     components: { Emoji },
     name :'',
     computed:{
       ...mapState('Discuss',['DiscussedInfo']),
        ...mapState('ArticleDetail',['ArticleDetail']),
       ...mapState('Login',['User']),
     },
      data() {
         return {
            content:'',
            contentLength:0,
            EmojiState:false,
         }
     },
     methods:{
        ...mapActions('Discuss',['addDiscuss','addReply','refresh']),
        ...mapMutations('Discuss',['ADDDISCUSS','DISCUSSDOWN']),
        getContentLength(e) {
			 let length=e.value.trimLeft().length
			 this.contentLength = length
		    this.content = e.value.trimLeft()
           this.content = common.filterSensitiveInfo(this.content)
		 },
       //发送照片
       sendPhoto(){
           this.$message.warning('功能暂未实现')
       },
       //发送表情
       sendEmo(emo){
           this.content += emo.value
       },
       //评论
       async discuss_(){
          let articleId  = this.ArticleDetail?.id  || 0
          let createdUid = this.User?.uid || 0
          let updateUid = this.User?.uid || 0
          let content = this.content
          return await this.addDiscuss({articleId,createdUid,content,updateUid})
       },
       //回复
       async reply_(){
          let discussId  = this.DiscussedInfo?.discussId 
          let replyUid = this.DiscussedInfo?.replyUid 
          let replyUsername =  this.DiscussedInfo?.replyUsername
          let articleId  = this.ArticleDetail?.id  || 0
          let createdUid = this.User?.uid || 0
          let updateUid = this.User?.uid || 0
          let content = this.content
          let res = await this.addReply({discussId,content,replyUid,replyUsername,updateUid,articleId,createdUid})
          return res
       },
       //评论
       async publish(){
          if(this.content == '') return this.$message.error('内容不能为空')
          let res 
          let key = this.DiscussedInfo?.type == 1?'评论':'回复'
     
          if(this.DiscussedInfo.type == 1)
          res = await this.discuss_()
          else res = await this.reply_()
          
         
          if(res.code == 200 ){
             this.ArticleDetail.extra.discusscount = this.ArticleDetail?.extra?.discusscount  + 1
             this.$message.success(key+"成功")
             return
          }
          if(res.code == -1) {
            this.DISCUSSDOWN()
            return this.$public.toLogin()

          }
           this.$message.error(res.message)
       
       }
     } 
  }
</script>
<style scoped lang='less'>

  //框
.frame{
   width: 100%;
   height: 150px;
   border: 2px solid var(--GeneralBackColor);
   border-radius: 5px;
   justify-content: space-between;
   position: relative;

   textarea{
      width: 100%;
      height: 100%;
      font-size: 18px;
      padding: 10px;
      box-sizing: border-box;
      font-family: var(--fontFamily);
      color: var(--fontColor);
   }
   p{
      position: absolute;
      right: 20px;bottom: 5px;
      height: 100%;
      align-items: flex-end;
   }
}
// 功能区
#Fun{
   margin-top: 10px;
   width: 100%;
   justify-content: flex-start;
   position: relative;

   img{
      width: 30px;height: 30px;
      margin-left: 5px;
   }
   .send{
      position: absolute;  
      right:10px;
   }
}
//表情
#Emoji{
   margin: 5px 0;
}
</style>